<template>
    <div>
        <h1>{{ number }}</h1>
        <h2>{{ num1 }} <button @click="num1++">num1自增</button></h2>
        <h2>{{ num2 }} <button @click="num2++">num2自增</button></h2>
        <hr>
        <h2>全部的工资：{{ all }}</h2>
        <h3>工龄：{{ workAge }}
            <button @click="info.workAge++">自增</button>
        </h3>
        <h3>等级：{{lev }}
            <button @click="info.title.lev++">自增</button>
        </h3>

        <h1>{{ info.title.sum.um }}</h1>
    </div>



</template>


<script setup>
import { watch, ref, reactive, watchEffect,readonly,shallowReadonly,toRef,toRefs } from 'vue';
const num1 = ref(10)
const num2 = ref(15)
const number = ref(25)
const all = ref(10)
const info = reactive(
    {
        workAge: 0,
        title: {
            name: '教授',
            lev: 2,
            sum:{
                um:10
            }
        }
    }
)
// console.log(info.workAge);
const workAge=toRef(info,'workAge')
const lev=toRef(info.title,'lev')
// const um=
// console.log(workAge,lev);

watchEffect(()=>{
    number.value=num1.value+num2.value
    all.value=10+workAge.value*0.1+(lev.value-1)*0.5
})

// console.log(all);


// setInterval(()=>{
//     stop
// },1000)

</script>